fakhr-khaleej-blog
Version:
Moving and relocation services blog
252 lines (235 loc) • 11 kB
JavaScript
import React from 'react'
import Layout from '../../components/Layout'
import Head from 'next/head'
import Link from 'next/link'
import { format } from 'date-fns'
import { useRouter } from 'next/router'
import Image from 'next/image'
import { getAllPosts, getPostBySlug } from '../../lib/blog'
import ReactMarkdown from 'react-markdown'
export default function PostPage({ post, morePosts }) {
const router = useRouter()
if (router.isFallback) {
return <div>Loading...</div>
}
if (!post) {
// Si no hay artículo, mostrar un mensaje y un enlace a la página principal del blog
return (
<Layout
title="المقال غير موجود | مدونة فخر الخليج"
description="المقال المطلوب غير موجود"
>
<div className="max-w-4xl mx-auto text-center py-16">
<h1 className="text-3xl font-bold mb-4">المقال غير موجود</h1>
<p className="text-gray-600 mb-8">
عذرًا، المقال الذي تبحث عنه غير موجود أو تمت إزالته.
</p>
<Link href="/blog" passHref>
<a className="inline-block bg-primary hover:bg-primary-dark text-white font-bold py-2 px-6 rounded-lg transition-colors">
العودة إلى المدونة
</a>
</Link>
</div>
</Layout>
)
}
return (
<Layout
title={`${post.title} | مدونة فخر الخليج`}
description={post.excerpt}
keywords={`${post.category}, مدونة فخر الخليج, أزياء مهنية, ${post.title}`}
>
<Head>
<script
type="application/ld+json"
dangerouslySetInnerHTML={{
__html: JSON.stringify({
"@context": "https://schema.org",
"@type": "BlogPosting",
"headline": post.title,
"image": `https://fakhrkhaleej.com${post.coverImage}`,
"datePublished": post.date,
"dateModified": post.date,
"author": {
"@type": "Person",
"name": post.author.name
},
"publisher": {
"@type": "Organization",
"name": "فخر الخليج",
"logo": {
"@type": "ImageObject",
"url": "https://fakhrkhaleej.com/logo.png"
}
},
"description": post.excerpt
})
}}
/>
</Head>
<div className="max-w-4xl mx-auto">
{/* رأس المقال */}
<div className="mb-8 text-center">
<Link href="/blog" passHref>
<a className="text-primary hover:text-primary-dark inline-flex items-center mb-6 transition-colors">
<svg className="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
</svg>
العودة إلى المدونة
</a>
</Link>
<span className="inline-block bg-primary bg-opacity-10 text-primary px-3 py-1 rounded-full text-sm font-medium mb-4">
{post.category}
</span>
<h1 className="text-3xl md:text-4xl lg:text-5xl font-bold mb-4">{post.title}</h1>
<div className="flex items-center justify-center">
<div className="relative w-10 h-10 rounded-full overflow-hidden">
<Image
src={post.author.avatar}
alt={post.author.name}
width={40}
height={40}
/>
</div>
<div className="mr-3 text-right">
<p className="font-medium">{post.author.name}</p>
<p className="text-sm text-gray-500">{post.date} · {post.readingTime} دقائق للقراءة</p>
</div>
</div>
</div>
{/* صورة المقال */}
<div className="relative h-96 w-full mb-10 rounded-lg overflow-hidden">
<Image
src={post.coverImage}
alt={post.title}
layout="fill"
objectFit="cover"
priority
/>
</div>
{/* محتوى المقال */}
<div className="prose prose-lg max-w-none mb-12">
<div dangerouslySetInnerHTML={{ __html: post.content }} />
</div>
{/* بطاقة الكاتب */}
<div className="bg-gray-50 rounded-lg p-8 mb-12">
<div className="flex items-center">
<div className="relative w-16 h-16 rounded-full overflow-hidden">
<Image
src={post.author.avatar}
alt={post.author.name}
width={64}
height={64}
/>
</div>
<div className="mr-4">
<h3 className="text-xl font-bold">عن {post.author.name}</h3>
<p className="text-gray-600">{post.author.title}</p>
</div>
</div>
</div>
{/* مقالات ذات صلة */}
{morePosts.length > 0 && (
<div>
<h2 className="text-2xl font-bold mb-6">مقالات ذات صلة</h2>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
{morePosts.map(relatedPost => (
<Link key={relatedPost.id} href={`/blog/${relatedPost.slug}`} passHref>
<a className="bg-white rounded-lg shadow-md overflow-hidden flex hover:shadow-lg transition-shadow">
<div className="relative w-24 h-24 md:w-32 md:h-32">
<Image
src={relatedPost.coverImage}
alt={relatedPost.title}
layout="fill"
objectFit="cover"
/>
</div>
<div className="p-4">
<span className="text-xs bg-primary bg-opacity-10 text-primary px-2 py-1 rounded-full">
{relatedPost.category}
</span>
<h3 className="font-bold mt-2 line-clamp-2">{relatedPost.title}</h3>
</div>
</a>
</Link>
))}
</div>
</div>
)}
{/* زر المشاركة والنشر */}
<div className="mt-12 flex justify-center">
<div className="flex space-x-4">
<a
href={`https://twitter.com/intent/tweet?text=${encodeURIComponent(post.title)}&url=${encodeURIComponent(`https://fakhrkhaleej.com/blog/${post.slug}`)}`}
target="_blank"
rel="noreferrer"
className="bg-[#1DA1F2] text-white p-3 rounded-full hover:opacity-90 transition-opacity"
aria-label="مشاركة على تويتر"
>
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
<path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723 10.016 10.016 0 01-3.127 1.195 4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"/>
</svg>
</a>
<a
href={`https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(`https://fakhrkhaleej.com/blog/${post.slug}`)}`}
target="_blank"
rel="noreferrer"
className="bg-[#1877F2] text-white p-3 rounded-full hover:opacity-90 transition-opacity"
aria-label="مشاركة على فيسبوك"
>
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
<path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
</svg>
</a>
<a
href={`https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(`https://fakhrkhaleej.com/blog/${post.slug}`)}`}
target="_blank"
rel="noreferrer"
className="bg-[#0A66C2] text-white p-3 rounded-full hover:opacity-90 transition-opacity"
aria-label="مشاركة على لينكدإن"
>
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
<path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
</svg>
</a>
<a
href={`mailto:?subject=${encodeURIComponent(post.title)}&body=${encodeURIComponent(`أردت مشاركة هذا المقال المثير للاهتمام معك: https://fakhrkhaleej.com/blog/${post.slug}`)}`}
className="bg-gray-700 text-white p-3 rounded-full hover:opacity-90 transition-opacity"
aria-label="مشاركة عبر البريد الإلكتروني"
>
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
</svg>
</a>
</div>
</div>
</div>
</Layout>
)
}
export async function getStaticPaths() {
const posts = getAllPosts()
const paths = posts.map((post) => ({
params: { slug: post.slug },
}))
return { paths, fallback: 'blocking' }
}
export async function getStaticProps({ params }) {
const post = getPostBySlug(params.slug)
// Si no se encuentra el artículo, devolver notFound
if (!post) {
return {
notFound: true
}
}
// الحصول على مقالات ذات صلة (نفس الفئة ولكن ليس نفس المقال)
const morePosts = getAllPosts()
.filter(p => p.category === post.category && p.id !== post.id)
.slice(0, 2)
return {
props: {
post,
morePosts
},
}
}